<template>
<view class="st-u-identification-real-name-apply">
  <u-field
      v-model="form.realName"
      label="真实姓名"
      placeholder="请填写真实姓名"
  >
  </u-field>
  <u-field
      v-model="form.idCardNo"
      label="身份证号"
      placeholder="请填写身份证号"
  >
  </u-field>

  <u-upload ref="idCardImageUp" class="u-m-t-30" :custom-btn="true" :action="uploadAction" :show-upload-list="false" :auto-upload="true" @on-success="idCardImageUpSuccess" :form-data="{path: '/realNameIdentifacation'}" >
    <view slot="addBtn" class="slot-btn" :style="{width: $_screenWidth + 'px'}" hover-class="slot-btn__hover" hover-stay-time="150">
      <u-icon v-if="!form.idCardImageUpUrl" name="plus" size="60" color="#c0c4cc"></u-icon>
      <view v-if="!form.idCardImageUpUrl"><text>身份证正面照</text></view>
      <u-image v-if="form.idCardImageUpUrl" width="100%" height="100%" :src="form.idCardImageUpUrl"></u-image>
    </view>
  </u-upload>
  <u-upload ref="idCardImageDown" class="u-m-t-30" :custom-btn="true" :action="uploadAction" :show-upload-list="false" :auto-upload="true" @on-success="idCardImageDownSuccess" :form-data="{path: '/realNameIdentifacation'}" >
    <view slot="addBtn" class="slot-btn" :style="{width: $_screenWidth + 'px'}" hover-class="slot-btn__hover" hover-stay-time="150">
      <u-icon v-if="!form.idCardImageDownUrl" name="plus" size="60" color="#c0c4cc"></u-icon>
      <view v-if="!form.idCardImageDownUrl"><text>身份证反面照</text></view>
      <u-image v-if="form.idCardImageDownUrl" width="100%" height="100%" :src="form.idCardImageDownUrl"></u-image>
    </view>
  </u-upload>

  <view class="u-flex">
    <u-button type="primary" class="u-m-t-30" size="medium" @click="submit">提交申请</u-button>
  </view>
</view>
</template>

<script>
/**
 * 实名认证申请组件
 */
import IdentificationUrl from '../../../../pc/IdentificationUrl.js'
export default {
  name: "st-u-identification-real-name-apply",
  data(){
    return {
      uploadAction:  this.$config.fileUploadUrl || '/file/cloudstorage/upload',
      form: {
        realName: '',
        idCardNo: '',
        // 身份证下面照
        idCardImageUpUrl: '',
        // 身份证反面照
        idCardImageDownUrl: ''
      },
      submitting: false
    }
  },
  methods: {
    idCardImageUpSuccess(data, index, lists, name){
      this.form.idCardImageUpUrl = data.url
    },
    idCardImageDownSuccess(data, index, lists, name){
      this.form.idCardImageDownUrl = data.url
    },
    submit(){
      if(!this.form.realName){
        this.$u.toast('请填写真实姓名')
        return
      }
      if(!this.form.idCardNo){
        this.$u.toast('请填写身份证号')
        return
      }
      if(!this.form.idCardImageUpUrl){
        this.$u.toast('请上传身份证正面照')
        return
      }
      if(!this.form.idCardImageDownUrl){
        this.$u.toast('请上传身份证反面照')
        return
      }

      if(this.submitting){
        return;
      }
      this.submitting = true
      let data = {
        code: 'real_name',
        name: '实名认证',
        contentMap: this.form
      }
      this.$http.post(IdentificationUrl.apply,data).then(res=>{
        this.$u.toast('申请成功，请耐心等待审核结果')
      }).catch(error=>{
        this.$u.toast(error.data.errorMsg)
      })

    }
  }
}
</script>

<style scoped>
.slot-btn {
  height: 340rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}
</style>